<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: pink;
    }

    .a {
      background-color: gray;
    }

    img {
      width: 500px;
      height: 500px;
    }

    .nav {
      color: red;
      width: 100px;
      height: 100px;
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <!-- <div>div</div>
  <div class="box">class</div>
  <div id="box">id</div>
  <img src="" alt="">
  <ul>
    <li>12</li> -->
  <!-- <li>23</li>
    <li>34</li> -->
  <!-- <img src="../../../../images/webapi/第一单元/3.webp" alt=""> -->
  <div class="a">
    我是div
  </div>

  </ul>
  <script>
    const div = document.querySelector('div')
    // div.className = 'nav box'

    // div.classList.add('nav')
    // div.classList.remove('a')
    div.classList.toggle('nav')

    // const img = document.querySelector('img')
    // img.src = '../../../../images/webapi/第一单元/2.webp'
    // img.title = '本人照片'
    // const obj = {
    //   name: '张三'
    // }
    // obj.name = '李四'

    // const box = document.querySelector('.box')
    // // box.innerText = '你好'
    // box.innerHTML = '<strong>你好</strong>'


    // const div = document.getElementById('box')
    // const div = document.getElementsByClassName('box')
    // const div = document.getElementsByTagName('div')
    // console.log(div)

    // const li = document.querySelectorAll('li')
    // console.log(li)
    // const asd = document.querySelector('div')
    // const asd = document.querySelector('.box')
    // asd.style.color = 'red'
    // const asd2 = document.querySelector('#box')
    // console.dir(asd)
    // console.log(typeof asd)
    // asd.style.color = 'red'
    // const asd = document.querySelector('li')
    // const asd = document.querySelectorAll('li')
    // console.log(asd)
    // // asd[2].style.color = 'gray'
    // for (let i = 0; i < asd.length; i++) {
    //   asd[i].style.color = 'gray'
    // }
    // console.log(asd)
    // asd.style.color = 'red'
    // const name = '张三'
    // const song = '唱歌'
    // document.write(name+song)

    // const arr = [1, 2, 3]
    // //  arr = [6, 5, 4] 报错
    // arr[0] = 666

    // // arr.push(4)
    // console.log(arr)

    // const obj = {
    //   name: '张三',
    //   age: 18
    // }
    // // obj.age = 20

    // // obj = {
    // //   name: '张三',
    // //   age: 666
    // // } 报错
    // console.log(obj)



  </script>
</body>

</html>